<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags"  prefix="shiro"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap-table/bootstrap-table.min.css" />



<title>管理员列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 管理员列表</nav>
<div class="page-container">
	<span id="toolbar" class="l">
		<shiro:hasPermission name="admin:delete">
		<a href="javascript:;" onclick="admin_batch_delete()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> 
		</shiro:hasPermission>
		<shiro:hasPermission name="admin:insert">
		<a href="javascript:;" onclick="admin_add()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加管理员</a>
		</shiro:hasPermission>
	</span>

	<table id="dataTable"></table>

</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">
	
	/* 文档加载完毕以后执行代码 */
	$(function(){
		
		//使用bootstrap插件初始化表格
		$("#dataTable").bootstrapTable({
			url: 'admin/list.do',//ajax请求的url地址
			/*
				ajax请求以后回调函数的处理
				后台使用返回的PageInfo对象中的 结果 级的key是list，总条数是total
				而前台bootstrapTable插件需要的数据的key叫做rows ，总条数也是叫做total
				那么出现一个问题 : 总条数的key能对上，结果集对不上，就需要在ajax请求完成回调
				responseHandler 这个函数方法处理一下
				并且在自定义一个 json,rows做为key，返回json的 list作为值
					total：还是total
				这样才能满足 bootstrapTable插件数据的需要
			*/
			responseHandler: function(res) { 
				/*
					res: 后台分页对象PageInfo返回对应的json对象
					res.list : 结果集
					res.total : 总记录数
				*/
				var data =  {rows: res.list,total: res.total};
				return data;
			},
			pagination: true,//显示分页条
			toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
			contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
			search: true,//是否显示搜索框
			pageNumber: 1,//默认的页面 第一页
			pageSize: 10,//默认的每页条数
			pageList:[10,12,25,50,100],//每页能显示的条数
			sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
			paginationHAlign: 'right', //底部分页条
			showRefresh: true, //是否显示刷新按钮
			columns: [ //表格显示数据对应的表头设置，
				{ checkbox: true},//是否显示前台的复选框（多选）
				/*
					每列数据的表头的设置
					filed:返回json数据对应数据的key
					title:表头要显示的名
				*/
				{field: 'userId',title: '编号'}, 
				{field: 'username',title: '账号'}, 
				{field: 'realname',title: '真实名称'},
				{field: 'createDate',title: '入职日期'},
				{field: 'rolename',title: '角色'},
				//操作列的设置（删除，修改）
				/*
				formatter: 格式化这一行，回调一个函数
				*/
				{
					field:'userId',
					title:'操作',
					align:'center',
					formatter:operationFormatter
				}
				],
			/* 设置ajax请求后台的参数
				params:bootstraptable传递给后台的默认参数名称
				函数可以直接返回一个参数对象，设置给传递给后台的参数名称和值
			*/
			queryParams:function(params){
				console.log("params :",params);
				//{search: "", sort: undefined, order: "asc", offset: 20, limit: 10}				
				var paramsData = {keyword:params.search,
								  pageSize:params.limit,
								  pageNum:params.offset/params.limit+1}
				
				return paramsData;
			}
			
		});
		
	})
	
	/* 
		列格式化函数
		value: the field value. userId用户的值
		row: the row record data. 整行数据
		index: the row index. 行号
		field: the row field. 字段名称： userId
		
		此函数返回一个字符串，html自动解析渲染效果
	*/
	function operationFormatter(value,row,index,field){
		//console.log("userId :"+value);
		var html = "<shiro:hasPermission name='admin:delete'>"
		html += "<span onclick='admin_del("+value+")' style='color:red;cursor:pointer' class='glyphicon glyphicon-trash'></span>&nbsp;&nbsp;";
		html += "</shiro:hasPermission>"
		html += "<shiro:hasPermission name='admin:update'>"
		html += "<span onclick='admin_update("+value+")' style='color:orange;cursor:pointer' class='glyphicon glyphicon-pencil'></span>";
		html += "</shiro:hasPermission>"
		
		return html;
	}
	

</script>



<script type="text/javascript">

/* 批量删除 */
function admin_batch_delete(){
	
	
	//获取bootstrap-table 选中的列
	var rows = $("#dataTable").bootstrapTable('getSelections');
	
	if(rows.length==0){
		layer.msg("最少选择一条需要删除的数据",{icon:0});
		return false;
	}
	
	
	layer.confirm("您确定要删除选中的数据吗？",function(){
		//声明数组封装用户id
		var userIds = [];
		for(var i = 0;i<rows.length;i++){
			var user = rows[i];
			//将用户id添加到数组
			userIds.push(user.userId);
		}
		//console.log(userIds);
		var userIdsStr = userIds.toString();//1,2,3,4,5,8
		
		$.post("admin/batchDelete.do",{ids:userIdsStr},function(data){
			//提示
			layer.msg(data.msg, {icon: data.code,time:1500},function(){
				if(data.code == 1){
					//操作成功，刷新BootStrap-table表格
					refreshTable();
				}
			});  
		});
	});
	
}

/*管理员-增加*/
function admin_add(){
	
	layer.open({
	  type:2,
	  maxmin:true,
	  area: ['800px', '500px'],
	  title: '新增管理员',
	  content: 'admin/edit.do'
	}); 
	
}
/*管理员-修改*/
function admin_update(userId){
	
	layer.open({
	  type:2,
	  maxmin:true,
	  area: ['800px', '500px'],
	  title: '修改管理员',
	  content: 'admin/edit.do?userId='+userId
	}); 
	
}

/*管理员-删除*/
function admin_del(uId){
	layer.confirm("亲，您确定要删除此条数据?",function(){
		//发送ajax请求删除数据
		$.get("admin/delete.do",{userId:uId},function(data){
			
			//提示
			layer.msg(data.msg, {icon: data.code,time:1500},function(){
				if(data.code == 1){
					//操作成功，刷新BootStrap-table表格
					refreshTable();
				}
			});  
			
			
		})
		
		
	})
}

//刷新表格函数
function refreshTable(){
	$("#dataTable").bootstrapTable('refresh');
}


/*管理员-编辑*/
function admin_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}

</script>
</body>
</html>